<!DOCTYPE html>
<html>
<head>
    <title>Knot.js Example - Ticket</title>

    <link rel="stylesheet" href="styles/example.css">

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

    <link rel="stylesheet" href="./styles/github.css">
    <script src="js/highlight.pack"></script>

    <link rel="stylesheet" href="styles/tabpage.css">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>

    <script src="../src/core/PrivateScope.js"></script>
    <script src="../src/core/Utility.js"></script>
    <script src="../src/core/Deferred.js"></script>
    <script src="../src/core/AttachedData.js"></script>
    <script src="../src/core/DataObserver.js"></script>
    <script src="../src/core/ArrayMonitor.js"></script>
    <script src="../src/core/GlobalSymbolHelper.js"></script>
    <script src="../src/core/OptionParser.js"></script>
    <script src="../src/core/KnotManager.js"></script>
    <script src="../src/core/CBSLoader.js"></script>
    <script src="../src/core/HTMLAPProvider.js"></script>
    <script src="../src/core/HTMLKnotBuilder.js"></script>
    <script src="../src/core/AddonHTMLAPProvider.js"></script>
    <script src="../src/core/ComponentAPProvider.js"></script>
    <script src="../src/core/KnotInterface.js"></script>

    <link rel="stylesheet" href="styles/tabpage.css" id="tabpageCSS">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs" id="tabpageCBS"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>
    <script src="js/tabpage.js" id="tabPageSource"></script>
    <script type="text/javascript" src="js/sourceTab.js"></script>

    <script src="../src/debugger/knot.debug.js"></script>

    <script type="text/cbs" class="exampleCBS">
    body{
        dataContext:/model;
    }

    /*
        These options set the selected result area and the "clear" button for both of the examples
    */

    .clearButton{
        disabled:selected>{return value?false:true;};
        @click:{this.selected = null;}
    }

    .selectionResult{
        /*set the selected as the data context */
         dataContext:selected;

         -> >b{
            innerText:name
         };
         -> >span{
            innerText:price
         };
    }


    /* For Example 1. Use template to create the options in select*/
    #classSelect{
        foreach: tickets;
        selectedData:selected;

        /* this is the template for the options in select */
        -> option{
            text:*>{return value.name+"("+value.price+")";}
        }
    }


    /* For Example 2. Use Access Point "options" to create the options in select*/
    #classSelect2{
        options[displayMember:(name & price)>@{return value[0] + "("+value[1]+")";}]:tickets;
        selectedData:selected;
    }
    </script>
    <script class="exampleJS">
    window.model = {
        tickets: [
            { name: "Economy", price: 199.95 },
            { name: "Business", price: 449.22 },
            { name: "First Class", price: 1199.99 }
        ],
        selected:null
    }

    </script>
</head>
<body>
<p class="comment">From knockout.js</p>


<div class="knot_example">
    <h2>Knot.js example- Ticket 1</h2>
    <p class="comment">
        this example uses template to fill the options of the combobox
    </p>
    <p>
        Choose a ticket class: <select id="classSelect"><option knot-template></option></select>
        <button class="clearButton">clear</button>
    </p>
    <p class="selectionResult">
        You have chosen <b></b>
        ($<span></span>)
    </p>
</div>

<div class="knot_example">
    <h2>Knot.js example- Ticket 2</h2>
    <p class="comment">
        this example uses access point "options" of "select" element.
    </p>
    <p>
        Choose a ticket class: <select id="classSelect2"></select>
        <button class="clearButton">clear</button>
    </p>
    <p class="selectionResult">
        You have chosen <b></b>
        ($<span></span>)
    </p>
</div>

<div id="sourceTab" knot-debugger-ignore  knot-component="SourceTabPage">
</div>
<script type="text/cbs">
        #sourceTab{
            sourceInfo:/sourceCodeInfo.codes
        }
    </script>
<script>
    //collect source codes before knot changes the HTML
    window.sourceCodeInfo = {codes:null};

    window.SourceCodeHelper.collectSourceCodes(
            [{selector:".knot_example",title:"HTML", type:"html"},
                {selector:".exampleJS",title:"Javascript", type:"javascript"},
                {selector:".exampleCBS",title:"CBS", type:"cbs"}],
            function(res){
                window.sourceCodeInfo.codes = res;
            });
</script>
</body>
</html>